<template>
  <li class="cart-item" @click="toDetail(id)">
    <div class="commodity-card">
      <div class="commodity-container" v-if="img">
        <img v-lazy="img" class="commodity-card-img item-pic" alt="加载中...">
      </div>
      <div class="commodity-card-msg">
        <div class="commodity-card-title" v-if="title">
            {{title}}
        </div>
        <div class="commodity-card-keyword">
          <span class="keyword tmall" v-if="platform" :style="platform===1?'background-color: #f40;':''">{{platform===2?'天猫':'淘宝'}}</span>
          <span class="keyword free-postage" v-if="freePostage">包邮</span>
        </div>
        <div class="commodity-card-foot">
          <div class="left">
            <span class="price" v-if="price">
              <span class="price-tag">￥</span> <span class="price-strong">{{price}}</span>
            </span>
            <span class="sale-num" v-if="num">{{num}}人已买</span>
          </div>
          <span class="coupon-value" v-if="weight">
            {{weight}}
          </span>
        </div>
      </div>
    </div>
  </li>
</template>
<script>
import { mapState, mapActions, mapMutations } from 'vuex'
export default {
  name: 'CartItem',
  props: ['img', 'title', 'price', 'weight', 'num', 'id', 'free-postage', 'platform'],
  mounted () {
    window.onscroll = () => {
      const scrollTop = (document.documentElement.scrollTop || document.body.scrollTop)
      const ofHeight = (document.documentElement.offsetHeight | document.body.offsetHeight)
      // console.log(scrollTop, scrollTop)

      if ((window.innerHeight + scrollTop - ofHeight) < 0) {
      } else {
        console.log('到达底部', this.$route.fullPath)
        if (this.$route.fullPath !== undefined && this.$route.fullPath.includes('detail')) {

        } else if (this.$route.fullPath !== undefined && this.$route.fullPath.includes('result')) {
          this.getSearchMore({ start: this.searchNextIndex, sword: this.keyWord, sort: this.sort })
        } else if (this.$route.fullPath !== undefined && this.$route.fullPath.includes('category')) {
          this.getCategoryMore({ start: this.categoryNextIndex, path: this.$route.fullPath })
        } else if (this.$route.fullPath !== undefined && this.$route.fullPath.includes('column')) {
          this.getColumnMore({ start: this.columnNextIndex, path: this.$route.fullPath })
        } else {
          this.getMoreAction({ start: this.nextIndex, path: this.$route.fullPath })
        }
      }
    }
  },
  methods: {
    ...mapMutations('searchdata', ['setSearchNextIndex']),
    ...mapActions('homedata', ['getMoreAction']),
    ...mapActions('columndata', ['getColumnMore']),
    ...mapActions('categorydata', ['getCategoryMore']),
    ...mapActions('searchdata', ['getSearchMore']),
    toDetail (id) {
      this.$router.push('/detail/' + id)
    }
  },
  computed: {
    ...mapState('homedata', ['nextIndex']),
    ...mapState('columndata', ['columnNextIndex']),
    ...mapState('categorydata', ['categoryNextIndex']),
    ...mapState('searchdata', ['searchNextIndex', 'keyWord', 'sort'])

  }
}
</script>

<style lang="scss" scoped>
  li.cart-item{
    width: 49%;
    margin-top: 8px;
    background-color: white;
    .commodity-card{
      .commodity-container{
        width: 100%;
        height: 11rem;
        img.commodity-card-img{
          width: 100%;
        }
      }
      .commodity-card-msg{
        padding: .24rem .27rem;
        box-sizing: border-box;
        .commodity-card-title{
          overflow: hidden;
          font-size: .32rem;
          line-height: 2.48rem;
          text-overflow: ellipsis;
          color: #877a73;
          white-space: nowrap;
        }
        .commodity-card-keyword{
          display: flex;
          justify-content: space-between;
          margin: 0.6rem;
          .tmall{
            background-color: #df2b2f;
            color: #fff;
            border-radius: .05rem;
            font-size: .32rem;
          }
          .free-postage{
            font-size: .32rem;
            color: #877a73;
          }
        }
        .commodity-card-foot{
          display: flex;
          justify-content: space-between;
          .price{
            color: #fa585a;
            display: inline-block;
            font-size: .53rem;
            .price-strong{
              font-size: 1.2rem;
            }
          }
          .sale-num{
            display: inline-block;
            font-size: .27rem;
            color: #877a73;
            letter-spacing: 0;
          }
          .coupon-value{
            font-size: 0.1rem;
            text-align: center;
            color: #fa585a;
            box-shadow: inset 0 0 0 0.03rem #fa585a;
            height: 1rem;
            margin-top: 0.5rem;
          }
        }
      }
    }
  }
</style>
